<template>
  <view class="bg-c6" style="height:100vh">
    <view class="wrap" v-for="(item,index) in recordData" :key="index">
      <view class="title">{{item.time}}</view>
      <view class="content bg-c1" v-for="(list,i) in item.list" :key="i">
          <view class="top">
              <text>{{list.name}}</text>
              <text>转账</text>
          </view>
           <view class="bottom">
               <text class="text1 c7 fs24">{{list.iphone}}</text>
               <text class="text2 c7 fs24">{{list.time}}</text>
               <text class="text3">{{list.num}}</text>
               <text class="text4">{{list.type}}</text>
           </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      recordData: [
        {
          time: "2019年01月02日",
          list: [
            {
              name: "*张三",
              iphone: "1345****716",
              time: "10:40:01",
              num: '-100.00',
              type: "USD"
            }
          ]
        },
        {
          time: "2018年11月02日",
          list: [
            {
              name: "*张三",
              iphone: "1345****716",
              time: "10:40:01",
              num: '-100.0',
              type: "USD"
            },
            {
              name: "*张三",
              iphone: "1345****716",
              time: "10:40:01",
              num: '-100.0',
              type: "USD"
            },
            {
              name: "*张三",
              iphone: "1345****716",
              time: "10:40:01",
              num: '-100.0',
              type: "USD"
            }
          ]
        }
      ]
    };
  },
  onLoad() {
    console.log(this.recordData.list);
  }
};
</script>

<style lang="scss" scoped>
@import "../../../styles/global/index";
.wrap {
  .title {
    height: 70upx;
    line-height: 70upx;
    padding:0 64upx;
  }
  .content{
    height: 145upx;
    padding:0 68upx;
    border-bottom: 1px solid #eee;
@include flex-cl;
    .top {
      width: 100%;
      @include flex-bw;
    }
    .bottom {
      width: 100%;
      @include flex-bw;
      .text2{
        padding-right: 180upx;
      }
    }
    &:nth-last-child(1){
      border: 0;
    }
  }
}
    
</style>